import { defineComponent, PropType } from 'vue'
import { Button } from 'ant-design-vue'
import { CheckCircleOutlined, CloseCircleFilled, RollbackOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'
import './style.less'

export default defineComponent({
    name: 'FormModalAction',
    props: {
        processStatus: {
            type: String as PropType<ProcessStatus>
        },
        basePermission: {
            type: Object as PropType<BasePermission>,
            default: () => ({})
        },
        isApproval: {
            type: Boolean as PropType<boolean>,
            default: false
        },
        isForm: {
            type: Boolean as PropType<boolean>,
            default: false
        },
        subLoading: {
            type: Boolean as PropType<boolean>,
            default: false
        },
        isCurrentOperatorUser: {
            type: Boolean as PropType<boolean>,
            default: false
        },
        isStartNode: {
            type: Boolean as PropType<boolean>,
            default: false
        },
        approveButtonConfig: {
            type: Array as PropType<ButtonSetting[]>,
            default: () => []
        },
        isShowUrge: {
            type: Boolean as PropType<boolean>,
            default: false
        }
    },
    emits: ['approve'],
    setup(props, { emit }) {
        const { t } = useI18n()

        /**
         *  判断按钮是否可见,basePermission中的配置优先级高于按钮的配置
         *
         * @param {boolean} visible 隐藏信息
         * @param {number} index approveButtonConfig(位置是固定的)下标，0是同意，1是拒绝，2是回退
         * @return {*}  {boolean}
         */
        const checkButtonVisible = (visible: boolean, index: number): boolean => {
            return visible ? props.approveButtonConfig[index].enable : false
        }
        const renderButton = () => {
            if (props.isCurrentOperatorUser && props.processStatus === 'todo' && !props.isStartNode) {
                const { saveFlag, processRejectFlag, processRollbackFlag } = props.basePermission
                return (
                    <>
                        {checkButtonVisible(saveFlag, 0) && (
                            <Button
                                type="primary"
                                html-type="submit"
                                icon={<CheckCircleOutlined />}
                                class="agree-btn"
                                onClick={() => emit('approve', 'APPROVE')}
                            >
                                {props.approveButtonConfig[0].showName || t('workflow.actions.agree')}
                            </Button>
                        )}
                        {checkButtonVisible(processRejectFlag, 1) && (
                            <Button
                                danger
                                class="ml24 danger-btn"
                                icon={<CloseCircleFilled />}
                                html-type="submit"
                                onClick={() => emit('approve', 'REJECT')}
                            >
                                {props.approveButtonConfig[1].showName || t('workflow.actions.refuse')}
                            </Button>
                        )}
                        {checkButtonVisible(processRollbackFlag, 2) && (
                            <Button
                                danger
                                class="ml24 danger-btn"
                                icon={<RollbackOutlined />}
                                html-type="submit"
                                onClick={() => emit('approve', 'BACK')}
                            >
                                {props.approveButtonConfig[2].showName || t('workflow.actions.back')}
                            </Button>
                        )}
                    </>
                )
            } else if (props.isStartNode && props.processStatus === 'todo') {
                // 这里是指当流程被退回到申请人节点时，申请人可以再次提交
                return (
                    <Button
                        type="primary"
                        html-type="submit"
                        class="agree-btn"
                        onClick={() => emit('approve', 'SUBMIT')}
                    >
                        {t('workflow.actions.submit')}
                    </Button>
                )
            } else if (props.isShowUrge) {
                return (
                    <>
                        <Button type="primary" html-type="submit" onClick={() => emit('approve', 'URGE')}>
                            {t('workflow.actions.urged')}
                        </Button>
                        <Button
                            danger
                            class="ml24 danger-btn"
                            icon={<CloseCircleFilled />}
                            html-type="submit"
                            onClick={() => emit('approve', 'REVOKE')}
                        >
                            {t('workflow.actions.undo')}
                        </Button>
                    </>
                )
            } else {
                return t('workflow.noProcessTodoTips')
            }
        }
        return () => {
            return <div>{renderButton()}</div>
        }
    }
})
